<template>
    <div class="pack">
        <div class="tree_container">
            <h3>机构列表</h3>
            <div class="treePack">
                <Tree :data="organizationTreeData" @on-select-change="organizationTreeChange"></Tree>
            </div>
        </div>
        <div class="detail_container">
            <h3>应急物资检验管理</h3>
            <div class="hunttool">
                <Select v-model="esTypeList" size="small" clearable  style="width:150px" placeholder="物资类型">
                    <Option v-for="item in esTypeListData" :value="item.value" :key="item.value">{{ item.value }}</Option>
                </Select>
                <Input v-model="valueEsName" size="small" placeholder="物资名称" class="hunt" ></Input>
                <Button type="primary" icon="ios-search" size="small"  @click="searchData">查询</Button>
                <!--<Button type="ghost" icon="ios-trash-outline" size="small" class="deltebtn" @click="batchDelete">批量删除</Button>-->
                <!--<Button type="ghost" icon="ios-plus-empty" size="small" class="addbtn" @click="addnew">新增</Button>-->
            </div>
            <div class="compile">
                <Table stripe  border :columns="columns" :data="tabledata" @on-selection-change="compileSelect"></Table>
            </div>
            <div class="page_container">
                <Page :current="pageNo" :total="totalCount" size="small" simple  class="page_btn" @on-change="pageChange"></Page>
                <P class="page_text">共{{totalCount}}条</P>
            </div>
        </div>
        <!--新增、查看、修改弹出框-->
        <Modal v-model="compile" :title="compiletitle" :closable="false" :mask-closable="false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" style="margin-right: 20px">
                <Form-item label="检验日期" prop="tmExamine">
                    <Date-picker type="datetime" placeholder="选择日期" v-model="formValidate.tmExamine" @on-change="tmExamineDate"></Date-picker>
                </Form-item>
                <Form-item label="下次检验日期" prop="tmExaNext">
                    <Date-picker type="datetime" placeholder="选择日期" v-model="formValidate.tmExaNext" @on-change="tmExaNextDate"></Date-picker>
                </Form-item>
                <Form-item label="检验人" prop="principal">
                    <Input v-model="formValidate.principal" placeholder=""></Input>
                </Form-item>
                <Form-item label="检验内容" prop="exaCt">
                    <Input v-model="formValidate.exaCt" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
                </Form-item>
                <Form-item label="存在问题" prop="beProblem">
                    <Input v-model="formValidate.beProblem" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="ghost" @click="compileCancel()">取消</Button>
                <Button type="primary" @click="compileSubmit('formValidate')">提交</Button>
            </div>
        </Modal>
        <!--检验记录-->
        <Modal v-model="inspectionRecord" title="检验记录" width="800">
            <Table border :columns="columnRecord" :data="dataRecord"></Table>
            <div class="page_container">
                <Page :current="RecordPage.pageNo" :total="RecordPage.totalCount" size="small" simple  class="page_btn" @on-change="recordPageChange"></Page>
                <P class="page_text">查到{{RecordPage.totalCount}}条信息</P>
            </div>
            <div slot="footer">
                <Button type="primary" @click="recordCancel">关闭</Button>
            </div>
        </Modal>
    </div>
</template>
<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        components: {},
        data() {
            const validateTmExamine = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择日期'));
                }else {
                    callback();
                }
            };
            const validateTmExaNext = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择日期'));
                }else if( new Date(this.formValidate.tmExamine).getTime() >= new Date(this.formValidate.tmExaNext).getTime() ){
                    callback(new Error('下次检验日期不正确'));
                }else {
                    callback();
                }
            };
            return {
                //机构树
                organizationTreeData:[],
                //新增、修改、查看弹出框
                compile: false,
                compiletitle:"填写记录",
                //记录批量删除id
                compiledele:"",
                //当前页
                pageNo:1,
                //总共多少页
                totalPage:'',
                //表格总共记录数
                totalCount:0,
                //检验记录弹窗
                inspectionRecord:false,
                //查询物资名称
                departmentCode:'',
                //查询物资名称
                valueEsName: '',
                //下拉列表
                esTypeList:"",
                //物资类型下拉列表数据
                esTypeListData: [],
                //表格头部信息
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '物资名称',
                        key: 'esName',
                        align: 'center'
                    },
                    {
                        title: '物资类型',
                        key: 'esType',
                        align: 'center'
                    },
                    {
                        title: '当前状态',
                        key: 'currentState',
                        align: 'center',
                    },
                    {
                        title: '填写记录',
                        key: 'currentState',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.formValidate.suppliesRegisterId=params.row.id;
                                            this.addnew();
                                        }
                                    }
                                }, '添加记录')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 220,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.RecordPage.suppliesRegisterId=params.row.id;
                                            this.RecordPage.pageNo=1;
                                            this.supplieRecordFlipList();
                                            this.inspectionShow();
                                        }
                                    }
                                }, '查看检验记录')
                            ]);
                        }
                    }
                ],
                //表格数据
                tabledata: [],
                //新增表单
                formValidate: {
                    suppliesRegisterId:'',
                    tmExamine:'',
                    tmExaNext:'',
                    principal:'',
                    exaCt:'',
                    beProblem:''
                },
                //表单验证
                ruleValidate: {
                    tmExamine: [
                        {required: true, validator: validateTmExamine, trigger: 'change' }
                    ],
                    tmExaNext: [
                        {required: true, validator: validateTmExaNext, trigger: 'change' }
                    ],
                    principal: [
                        { required: true, whitespace: true, message: '请填写检验人', trigger: 'blur' }
                    ],
                    exaCt: [
                        { type: 'string', max: 200, message: '内容过长，最多200字', trigger: 'blur' }
                    ],
                    beProblem: [
                        { type: 'string', max: 200, message: '内容过长，最多200字', trigger: 'blur' }
                    ],
                },
                //检验记录弹窗表头
                columnRecord:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '检验日期',
                        width: 160,
                        key: 'tmExamine',
                        align: 'center',
/*                        render: function(h, params){
                            var newTime = new Date(params.row.tmExamine);
                            var Y=newTime.getFullYear();
                            var M=newTime.getMonth()+1;
                            var D=newTime.getDate();
                            var H=newTime.getHours();
                            var m=newTime.getMinutes();
                            var s=newTime.getSeconds();
                            var time=Y+"-"+M+"-"+D+" "+H+":"+m+":"+s;
                            return h('div', time);
                        }*/
                    },
                    {
                        title: '检验内容',
                        key: 'exaCt',
                    },
                    {
                        title: '存在问题',
                        key: 'beProblem',
                    },
                    {
                        title: '下次检验日期',
                        width: 160,
                        key: 'tmExaNext',
                        align: 'center',
/*                        render: function(h, params){
                            var newTime = new Date(params.row.tmExaNext);
                            var Y=newTime.getFullYear();
                            var M=newTime.getMonth()+1;
                            var D=newTime.getDate();
                            var H=newTime.getHours();
                            var m=newTime.getMinutes();
                            var s=newTime.getSeconds();
                            var time=Y+"-"+M+"-"+D+" "+H+":"+m+":"+s;
                            return h('div', time);
                        }*/
                    },
                    {
                        title: '检验人',
                        key: 'principal',
                        align: 'center',
                    },
                ],
                //检验记录弹窗表数据
                dataRecord:[],
                //查看检验记录表格分页
                RecordPage:{
                    suppliesRegisterId:'',
                    pageNo:1,
                    totalCount:0,
                    totalPage:0,
                }
            }
        },
        computed: {},
        created() {
            this.flipList();
            this.organizationFlipList();
            this.dictionaryFlipList();
        },
        methods: {
            tmExamineDate(date) {
                this.formValidate.tmExamine=date;
            },
            tmExaNextDate(date) {
                this.formValidate.tmExaNext=date;
            },
            //日期格式转换
            dateformatting(dateval){
                var newTime = new Date(dateval);
                var yyyy=newTime.getFullYear();
                var MM=newTime.getMonth()+1;
                var dd=newTime.getDate();
                var hh=newTime.getHours();
                var mm=newTime.getMinutes();
                var ss=newTime.getSeconds();
                var time=yyyy+"-"+MM+"-"+dd+" "+hh+":"+mm+":"+ss ;
                return time
            },
            //机构树点击事件
            organizationTreeChange(val){
                if(val.length>0){
                    this.departmentCode=val[0].code;
                }else {
                    this.departmentCode='';
                }
                this.searchData();
            },
            //搜索
            searchData(){
                this.pageNo=1;
                this.flipList();
            },
            //新增
            addnew(){
                this.formValidate.id="";
                this.compile = true;
            },
            //修改
            amend(val) {
                this.formValidate.id=val.id;
                this.formValidate.name=val.name;
                this.formValidate.esName=val.esName;
                this.formValidate.numCount=val.numCount;
                this.formValidate.esType=val.esType;
                this.formValidate.esModel=val.esModel;
                this.formValidate.preObjective=val.preObjective;
                this.formValidate.purpose=val.purpose;
                this.formValidate.suppliesStorageId=val.suppliesStorageId;
                this.formValidate.tmUsage=val.tmUsage;
                this.formValidate.serviceLife=val.serviceLife;
                this.formValidate.examineCycle=val.examineCycle;
                this.formValidate.principal=val.principal;
                this.compile = true;
            },
            //新增检验记录
            compileSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        ezjsUtil.request(apiConstants.supplieRecord_edit,
                            {
                                suppliesRegisterId:_this.formValidate.suppliesRegisterId,
                                tmExamine: _this.formValidate.tmExamine,
                                tmExaNext: _this.formValidate.tmExaNext,
                                principal: _this.formValidate.principal,
                                exaCt: _this.formValidate.exaCt,
                                beProblem: _this.formValidate.beProblem,
                            },
                            function (err, data) {
                                if (err) {
                                    return;
                                }
                                _this.pageNo=1;
                                _this.flipList();
                            }
                        )
                        _this.$Message.success('提交成功!');
                        _this.compile=false;
                        _this.compileReset('formValidate');
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            //表单重置
            compileReset (name) {
                this.$refs[name].resetFields();
            },
            //表格勾选
            compileSelect(selection,row){
                var ids="";
                for (var i=0;i<selection.length;i++){
                    ids=selection[i].id+","+ids;
                }
                this.compiledele=ids
            },
            //批量删除
            batchDelete(){
                this.supplieRegisterremoveByIds(this.compiledele);
            },
            //表单取消
            compileCancel(){
                this.compile=false;
                this.compileReset('formValidate');
            },
            //检验记录窗口显示
            inspectionShow(){
                this.inspectionRecord=true;
            },
            //检验记录窗口关闭
            recordCancel(){
                this.inspectionRecord=false;
            },
            //分页改变时
            pageChange(val){
                if(val<=this.totalPage){
                    this.pageNo=val;
                    this.flipList();
                }
            },
            //查看检验记录表格分页
            recordPageChange(val){
                if(val<=this.RecordPage.totalPage){
                    this.RecordPage.pageNo=val;
                    this.supplieRecordFlipList();
                }
            },
            //判断当前状态是否可用
            articleDeadline(newdata){
                var nowtime=(new Date()).getTime();
                for (var i=0;i<newdata.length;i++){
                    if(newdata[i].serviceLife>=nowtime){
                        newdata[i].currentState = "正常使用";
                    }else {
                        newdata[i].currentState = "过期使用";
                    }
                }
                this.tabledata=newdata;
            },
            //查询物资登记列表
            flipList(){
                var _this = this;
                ezjsUtil.request(apiConstants.supplieRegister_flipList,
                    {
                        departmentCode:_this.departmentCode,
                        esType:_this.esTypeList,
                        esName:_this.valueEsName,
                        pageNo: _this.pageNo
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.articleDeadline(data.listInfo);
                        _this.totalCount=data.flipInfo.totalCount;
                        _this.totalPage=data.flipInfo.totalPage;
                    }
                )
            },
            //查看检验记录
            supplieRecordFlipList(){
                var _this = this;
                ezjsUtil.request(apiConstants.supplieRecord_flipList,
                    {
                        suppliesRegisterId:_this.RecordPage.suppliesRegisterId,
                        pageNo:_this.RecordPage.pageNo
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.dataRecord=data.listInfo;
                        _this.RecordPage.totalCount=data.flipInfo.totalCount;
                        _this.RecordPage.totalPage=data.flipInfo.totalPage;

                    }
                )
            },

            //获取所有组织机构树
            organizationFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.organization_flipList,
                    {  },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.organizationTreeData=data;
                        _this.organizationTreeData[0].expand=true;
                    }
                )
            },
            //物资类型数据字典查询
            dictionaryFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.dictionary_flipList,
                    {
                        key: 'esType',
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.esTypeListData=data;
                    }
                )
            },
        },
        mounted() {
        }
    }
</script>
<style lang="less" scoped>
    .pack{
        width: 100%;
        height: 100%;
    }
    .tree_container{
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;
    h3{
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }
    }
    .detail_container{
        height: 100%;
        margin-left: 280px;
        overflow: hidden;
        overflow-y: auto;
    }
    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }
    .treePack{
        height: 94%;
        padding: 10px;
        overflow: auto;
    }
    .hunttool {
        padding:15px 0;
    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }
    .page_container{
        height: 30px;
        margin-top: 20px;
    .page_btn{
        float: right;
    }
    .page_text{
        float: right;
        line-height: 26px;
    }
    }
</style>